
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>家庭医生管理系统</title>
    <link rel="stylesheet" type="text/css" href="/css/public.css">
    <style>
        /* === Remove input autofocus webkit === */
        body{font:13px/26px "微软雅黑";}
        *:focus {outline: none;}
        .contact{width:720px;background:#F1F1F1;margin:20px auto;padding:10px;}

        /* === Form Typography === */
        .contact_form h2{font-size:20px;font-weight:bold;}
        .contact_form label{font-size:14px;}
        .form_hint, .required_notification{font-size: 12px;}

        /* === List Styles === */
        .contact_form ul {width:720px;list-style-type:none;list-style-position:outside;padding:0px;}
        .contact_form li{padding:12px; border-bottom:1px solid #DFDFDF;position:relative;}
        .contact_form li:first-child, .contact_form li:last-child {border-bottom:1px solid #777;}

        /* === Form Header === */
        .contact_form h2 {margin:0;display: inline;}
        .required_notification {color:#d45252; margin:5px 0 0 0; display:inline;float:right;}

        /* === Form Elements === */
        .contact_form label {width:150px;margin-top: 3px;display:inline-block;float:left;padding:3px;}
        .contact_form input {height:20px; width:220px; padding:5px 8px;}
        .contact_form textarea {padding:8px; width:300px;}
        .contact_form button {margin-left:156px;}

        /* form element visual styles */
        .contact_form input, .contact_form textarea {
            border:1px solid #aaa;
            box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
            border-radius:2px;
            padding-right:30px;
            -moz-transition: padding .25s;
            -webkit-transition: padding .25s;
            -o-transition: padding .25s;
            transition: padding .25s;
        }
        .contact_form input:focus, .contact_form textarea:focus {
            background: #fff url("/images/red_asterisk.png") no-repeat;
            border:1px solid #555;
            box-shadow: 0 0 3px #aaa;
            padding-right:70px;
        }
        /* === HTML5 validation styles === */
        .contact_form input:required, .contact_form textarea:required {background: #fff url("/images/red_asterisk.png") no-repeat 98% center;}
        .contact_form input:required:valid, .contact_form textarea:required:valid {background: #fff url("/images/valid.png") no-repeat 98% center;box-shadow: 0 0 5px #5cd053;border-color: #28921f;}
        .contact_form input:focus:invalid, .contact_form textarea:focus:invalid {background: #fff url("/images/invalid.png") no-repeat 98% center;box-shadow: 0 0 5px #d45252;border-color: #b03535;}

        /* === Form hints === */
        .form_hint {
            background: #d45252;
            border-radius: 3px 3px 3px 3px;
            color: white;
            margin-left:8px;
            padding: 1px 6px;
            z-index: 999;
            position: absolute;
            display: none;
        }
        .form_hint::before {
            content: "\25C0";
            color:#d45252;
            position: absolute;
            top:1px;
            left:-6px;
        }
        .contact_form input:focus + .form_hint {display: inline;}
        .contact_form input:required:valid + .form_hint {background: #28921f;}
        .contact_form input:required:valid + .form_hint::before {color:#28921f;}

        /* === Button Style === */
        button.submit {
            background-color: #68b12f;
            background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
            background: -webkit-linear-gradient(top, #68b12f, #50911e);
            background: -moz-linear-gradient(top, #68b12f, #50911e);
            background: -ms-linear-gradient(top, #68b12f, #50911e);
            background: -o-linear-gradient(top, #68b12f, #50911e);
            background: linear-gradient(top, #68b12f, #50911e);
            border: 1px solid #509111;
            border-bottom: 1px solid #5b992b;
            border-radius: 3px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            -ms-border-radius: 3px;
            -o-border-radius: 3px;
            box-shadow: inset 0 1px 0 0 #9fd574;
            -webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
            -moz-box-shadow: 0 1px 0 0 #9fd574 inset;
            -ms-box-shadow: 0 1px 0 0 #9fd574 inset;
            -o-box-shadow: 0 1px 0 0 #9fd574 inset;
            color: white;
            font-weight: bold;
            padding: 6px 20px;
            text-align: center;
            text-shadow: 0 -1px 0 #396715;
        }
        button.submit:hover {
            opacity:.85;
            cursor: pointer;
        }
        button.submit:active {
            border: 1px solid #20911e;
            box-shadow: 0 0 10px 5px #356b0b inset;
            -webkit-box-shadow:0 0 10px 5px #356b0b inset ;

            -moz-box-shadow: 0 0 10px 5px #356b0b inset;
            -ms-box-shadow: 0 0 10px 5px #356b0b inset;
            -o-box-shadow: 0 0 10px 5px #356b0b inset;
        }
        a.register_btn {
            margin-left: 188px;
            text-decoration: none;
            background-color: #68b12f;
            background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
            background: -webkit-linear-gradient(top, #68b12f, #50911e);
            background: -moz-linear-gradient(top, #68b12f, #50911e);
            background: -ms-linear-gradient(top, #68b12f, #50911e);
            background: -o-linear-gradient(top, #68b12f, #50911e);
            background: linear-gradient(top, #68b12f, #50911e);
            border: 1px solid #509111;
            border-bottom: 1px solid #5b992b;
            border-radius: 3px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            -ms-border-radius: 3px;
            -o-border-radius: 3px;
            box-shadow: inset 0 1px 0 0 #9fd574;
            -webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
            -moz-box-shadow: 0 1px 0 0 #9fd574 inset;
            -ms-box-shadow: 0 1px 0 0 #9fd574 inset;
            -o-box-shadow: 0 1px 0 0 #9fd574 inset;
            color: white;
            font-weight: bold;
            padding: 6px 20px;
            text-align: center;
            text-shadow: 0 -1px 0 #396715;
        }
        a.register_btn:hover {
            opacity:.85;
            cursor: pointer;
        }
        a.register_btn:active {
            border: 1px solid #20911e;
            box-shadow: 0 0 10px 5px #356b0b inset;
            -webkit-box-shadow:0 0 10px 5px #356b0b inset;
            -moz-box-shadow: 0 0 10px 5px #356b0b inset;
            -ms-box-shadow: 0 0 10px 5px #356b0b inset;
            -o-box-shadow: 0 0 10px 5px #356b0b inset;
        }
        .lock{
            padding-left: 34px;
            font-size: 20px;
            background: url(/images/lock2.png) no-repeat 0 -2px;
            background-size: 30px;
        }
        #checkbox{
            width: 164px;
        }
        #checkbox1{
            width: 20px;
            vertical-align: middle;
            margin-right: 10px;
            box-shadow: 0px 0px;
        }
        #checCodeInput{
            position: relative;
            bottom: 20px;
            left:50px;
        }
    </style>
</head>
<body>
<div class="contact">
    <form class="contact_form" id="loginForm" method="post" name="contact_form">
        <ul>
            <li>
                <h2 class="lock">登陆后台</h2>
            </li>
            <li>
                <label for="name">账号:</label>
                <input type="text" name="name" placeholder="请输入账号" required />
                <span class="form_hint">请输入账号</span>
            </li>
            <li>
                <label for="password">密码:</label>
                <input type="password" name="password" placeholder="请输入密码" required />
                <span class="form_hint">请输入密码</span>
            </li>
            <li>
                <#--<label for="password">密码:</label>-->
                <img id="checkCode" onclick="javascprit:resetCode(this);" src="/login/getCode" alt="看不清？点击刷新" title="看不清？点击刷新" style="cursor:pointer;width: 100px;height: 50px">
                <input id="checCodeInput" type="text" name="checCodeInput" placeholder="请输入验证码" required />
            </li>
            <li>
                <button class="submit" onclick="submitForm()" type="button" id="login">登陆</button>
                <a href="javascript:;" class="register_btn">重置</a>
            </li>
        </ul>
    </form>
</div>
<script src="/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="/layer/layer.js"></script>
<script type="text/javascript" src="/js/common.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        if(window!=window.top){
            window.top.location.href="/";
        }
    });

    function resetCode(checkCode) {
        checkCode.src = '/login/getCode' + '?id=' + Math.random();
    }
    function submitForm() {
//        var form=document.getElementById("loginForm");
//        form.submit({
//            success:function (res) {
//                //跳转页面
//                var d=eval(res);
//                console.info(1234);
//                console.info(d);
//                if (res!=null&&d.msg=='success') {
//                    window.location.href = '/login/goMain'
//                }
//                else{
//                    alert(d.msg);
//                    $("#checkCode").click();
//                }
//            }
//        })
        var index=com.msg_load();
        $.ajax({
            type: "POST",
            url: "/login/doLogin",
            data:$('#loginForm').serialize(),
            success: function (data) {
                com.msg_load_close(index);
                var d=eval(data);
                if (data!=null&&d.msg=='success') {
                    window.location.href = '/login/goMain'
                } else {
                    $("#checkCode").click();
                    com.msg_error(d.msg);
                }
            }
        });
    }

</script>
</body>
</html>